<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>用三国志资源做的仿站</title>
		<link
			href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Glide.js/3.5.0/css/glide.core.min.css"
			rel="stylesheet" />
		<link
			href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Glide.js/3.5.0/css/glide.theme.min.css"
			rel="stylesheet" />
		<link href="./font/fa/css/font-awesome.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="./style/style.css" />
	</head>

	<body>
		<!-- 顶部：开始 -->
		<header>
			<div class="logo">三国公司</div>
			<nav>
				<a href="#">首页</a>
				<a href="#">关于我们</a>
				<a href="#">成功案例</a>
				<a href="#">团队介绍</a>
				<a href="#">服务流程</a>
				<a href="#">公司动态</a>
				<i class="fa fa-search"></i>
			</nav>
			<div class="burger">
				<div class="burger-line1"></div>
				<div class="burger-line2"></div>
				<div class="burger-line3"></div>
			</div>
		</header>
		<!-- 顶部：结束 -->

		<!-- 轮播：开始 -->
		<div class="glide">
			<div class="glide__track" data-glide-el="track">
				<div class="glide__slides">
					<div class="glide__slide">
						<div class="slide-caption">
							<h1>工欲善其事，必先利其器。</h1>
							<h3>
								我们坚信，每一个人都是拥有独特的「超能力」。你的独特「超能力」成就了不一样的你。我们需要这样的你，一起来成就，做自己的超级英雄。
							</h3>
							<button class="explore-btn">探索更多</button>
						</div>
						<div class="backdrop"></div>
						<img src="./assets/image/bg-01.jpg" alt="" />
					</div>
					<div class="glide__slide">
						<div class="slide-caption left">
							<h1>滚滚长江东逝水，浪花淘尽英雄。</h1>
							<h3>
								是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。
							</h3>
							<button class="explore-btn">探索更多</button>
						</div>
						<div class="backdrop"></div>
						<video
							src="./assets/video/video-01.mp4"
							muted
							autoplay
							loop></video>
					</div>
				</div>
			</div>
			<div class="glide__arrows" data-glide-el="controls">
				<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
					<
				</button>
				<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
					>
				</button>
			</div>
			<div class="glide__bullets" data-glide-el="controls[nav]">
				<button class="glide__bullet" data-glide-dir="=0"></button>
				<button class="glide__bullet" data-glide-dir="=1"></button>
			</div>
		</div>
		<!-- 轮播：结束 -->

		<div class="content-wrapper">
			<!-- 关于我们：开始 -->
			<section class="about-us">
				<h2 class="title1">关于我们</h2>
				<p class="intro">
					中国第一部长篇章回体历史小说，以描写战争为主，大概分为黄巾之乱、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分。
				</p>
				<div class="features">
					<div class="feature">
						<i class="fa fa-drupal"></i>
						<h4 class="feature__title">真实与虚构并存</h4>
						<p class="feature__content">
							演义不是全部真实的，是通过适度改编后写成的小说。故有《三国演义》是七分史实，三分虚构之说。
						</p>
					</div>
					<div class="feature">
						<i class="fa fa-pied-piper-alt"></i>
						<h4 class="feature__title">人物与线索的紧密结合</h4>
						<p class="feature__content">
							成功地塑造了许多个性鲜明的人物，采用了沿线索来记叙的文学手法。
						</p>
					</div>
					<div class="feature">
						<i class="fa fa-themeisle"></i>
						<h4 class="feature__title">诗词与歌赋的无限魅力</h4>
						<p class="feature__content">
							引入了大量的诗词歌赋。一部分是为了表达情感而引入的，另一部分则是出现在人物的吟唱中或笔下。
						</p>
					</div>
					<div class="feature">
						<i class="fa fa-rocket"></i>
						<h4 class="feature__title">善于描写战争</h4>
						<p class="feature__content">
							通过大篇幅的战争场景描写来渲染战争的残酷，展现了人物性格。
						</p>
					</div>
					<div class="feature">
						<i class="fa fa-pagelines"></i>
						<h4 class="feature__title">杂雅俗共赏的语言</h4>
						<p class="feature__content">
							整篇文章采用的是半文半白的语言，不像《三国志》语言那般晦涩难懂。
						</p>
					</div>
					<div class="feature">
						<i class="fa fa-fort-awesome"></i>
						<h4 class="feature__title">民族精神</h4>
						<p class="feature__content">
							对于中华民族的民族精神产生了极大的影响，其中很多人身上的精神都已经融入了民族精神之中。
						</p>
					</div>
				</div>
			</section>
			<!-- 关于我们：结束 -->

			<!-- 成功案例：开始 -->
			<section class="showcase section--bg">
				<h2 class="title1">成功案例</h2>
				<div id="filterbtns" class="filter-btns">
					<button class="filter-btn active" data-filter="*">全部</button>
					<button class="filter-btn" data-filter=".wei">魏国</button>
					<button class="filter-btn" data-filter=".shu">蜀国</button>
					<button class="filter-btn" data-filter=".wu">吴国</button>
				</div>
				<div class="cases">
					<div class="case shu">
						<img src="./assets/image/img-01.webp" alt="" />
					</div>
					<div class="case wei shu">
						<img src="./assets/image/img-02.webp" alt="" />
					</div>
					<div class="case wu">
						<img src="./assets/image/img-03.webp" alt="" />
					</div>
					<div class="case wei">
						<img src="./assets/image/img-04.webp" alt="" />
					</div>
					<div class="case shu">
						<img src="./assets/image/img-05.webp" alt="" />
					</div>
				</div>
			</section>
			<!-- 成功案例：结束 -->

			<!-- 服务流程：开始 -->
			<section class="service-flow">
				<h2 class="title1">服务流程</h2>
				<div class="services">
					<div class="service">
						<img src="./assets/image/img-07.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-08.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-09.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-10.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-11.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-12.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-13.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-14.webp" alt="" />
					</div>
					<div class="service">
						<img src="./assets/image/img-15.webp" alt="" />
					</div>
				</div>
			</section>
			<!-- 服务流程：结束 -->

			<!-- 团队介绍：开始 -->
			<section class="team-intro section--bg">
				<h2 class="title1">团队介绍</h2>
				<div class="members">
					<div class="member">
						<div class="avator">
							<img src="./assets/image/avator-01.webp" alt="" />
						</div>
						<div class="name">刘备</div>
						<div class="position">蜀之昭烈皇帝</div>
						<ul class="socila-links">
							<li>
								<a href="#"><i class="fa fa-weixin"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-weibo"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-github"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-linkedin"></i></a>
							</li>
						</ul>
					</div>
					<div class="member">
						<div class="avator">
							<img src="./assets/image/avator-02.webp" alt="" />
						</div>
						<div class="name">曹操</div>
						<div class="position">魏武帝</div>
						<ul class="socila-links">
							<li>
								<a href="#"><i class="fa fa-weixin"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-weibo"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-github"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-linkedin"></i></a>
							</li>
						</ul>
					</div>
					<div class="member">
						<div class="avator">
							<img src="./assets/image/avator-03.webp" alt="" />
						</div>
						<div class="name">孙权</div>
						<div class="position">吴国大帝</div>
						<ul class="socila-links">
							<li>
								<a href="#"><i class="fa fa-weixin"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-weibo"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-github"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-linkedin"></i></a>
							</li>
						</ul>
					</div>
					<div class="member">
						<div class="avator">
							<img src="./assets/image/avator-04.webp" alt="" />
						</div>
						<div class="name">张角</div>
						<div class="position">太平道教祖</div>
						<ul class="socila-links">
							<li>
								<a href="#"><i class="fa fa-weixin"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-weibo"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-github"></i></a>
							</li>
							<li>
								<a href="#"><i class="fa fa-linkedin"></i></a>
							</li>
						</ul>
					</div>
				</div>
			</section>
			<!-- 团队介绍：结束 -->

			<!-- 统计：开始 -->
			<section class="statistic">
				<div class="piece">
					<i class="fa fa-fort-awesome"></i>
					<div class="number">46</div>
					<div class="desc">座城池</div>
				</div>
				<div class="piece">
					<i class="fa fa-rocket"></i>
					<div class="number">806</div>
					<div class="desc">次战斗</div>
				</div>
				<div class="piece">
					<i class="fa fa-users"></i>
					<div class="number">623</div>
					<div class="desc">位武将</div>
				</div>
				<div class="piece">
					<i class="fa fa-gift"></i>
					<div class="number">124</div>
					<div class="desc">个宝物</div>
				</div>
			</section>
			<!-- 统计：结束 -->

			<!-- 公司动态：开始 -->
			<section class="company-news">
				<h2 class="title1">公司动态</h2>
				<p class="intro">关注公司动态，第一时间获取一手消息</p>
				<div class="articles">
					<article>
						<div class="image-wrapper">
							<img src="./assets/image/img-16.webp" alt="" />
						</div>
						<div class="meta">
							<div><i class="fa fa-calendar"></i>2022年02月02日</div>
							<div><i class="fa fa-comments"></i>56条评论</div>
						</div>
						<div class="title">184年2月 黃巾之亂</div>
						<div class="content">
							東漢末期，漢朝極度腐敗及混亂，疲憊的百姓尋求著救濟。
							此時，太平道教祖張角為推翻漢朝而舉兵，世間立刻出現蜂擁的起義者，史稱「黃巾之亂」。亂世揭開序幕。
						</div>
						<button type="button" class="more-btn">阅读更多</button>
					</article>
					<article>
						<div class="image-wrapper">
							<img src="./assets/image/img-17.webp" alt="" />
						</div>
						<div class="meta">
							<div><i class="fa fa-calendar"></i>2022年02月02日</div>
							<div><i class="fa fa-comments"></i>56条评论</div>
						</div>
						<div class="title">194年6月 群雄割據</div>
						<div class="content">
							暴虐無道的董卓最終遭呂布討伐。天下再次陷入群雄割據的局面。
							河北一地有袁紹和公孫瓚相爭，中原則是呂布從背後偷襲正在攻打徐州的曹操。而江東，則是年輕的孫策嶄露頭角。
						</div>
						<button type="button" class="more-btn">阅读更多</button>
					</article>
					<article>
						<div class="image-wrapper">
							<img src="./assets/image/img-18.webp" alt="" />
						</div>
						<div class="meta">
							<div><i class="fa fa-calendar"></i>2022年02月02日</div>
							<div><i class="fa fa-comments"></i>56条评论</div>
						</div>
						<div class="title">227年2月 出師表</div>
						<div class="content">
							曹操、劉備等人已逝，漢朝滅亡，天下逐漸形成魏、吳、蜀三國鼎立的局面。
							適逢魏帝曹丕驟逝，蜀之諸葛亮視為天賜良機，遂上奏「出師表」。為攻魏而北伐。
						</div>
						<button type="button" class="more-btn">阅读更多</button>
					</article>
				</div>
			</section>
			<!-- 公司动态：结束 -->
		</div>

		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/animejs/3.2.1/anime.min.js"></script>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Glide.js/3.5.0/glide.min.js"></script>
		<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/scrollReveal.js/4.0.9/scrollreveal.min.js"></script>
		<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/smooth-scroll/16.1.3/smooth-scroll.polyfills.min.js"></script>
		<script src="./vendor/isotope/isotope.pkgd.min.js"></script>
		<script src="./script/index.js"></script>
	</body>
</html>
